<template>
  <view>
    <TabBar
      :tabs="tabs"
      :activeTab="activeTab"
      @update:activeTab="handleTabChange"
      :searchValue="searchValue"
    />
    <BackTop :show="showBackToTop" />

    <view>
      <div style="height: 120rpx"></div>
      <view>
        <UserList :data="data" :activeTablist="activeTablist" :viewMode="viewMode" />
      </view>
      <div class="toggle-state">
        <view class="page">
          <view class="main-button" @click="toggleOverlay">
            <img
              :src="
                viewMode === 'avatar'
                  ? '../../static/images/twostate.png'
                  : viewMode === 'list'
                  ? '../../static/images/state.png'
                  : viewMode === 'grid'
                  ? '../../static/images/bigstate.png'
                  : '../../static/images/state.png'
              "
              alt=""
            />
            <br />
            <text>
              {{
                viewMode === 'avatar'
                  ? '头像'
                  : viewMode === 'list'
                  ? '列表'
                  : viewMode === 'grid'
                  ? '大图'
                  : '列表'
              }}
            </text>
          </view>
          <view class="overlay" v-if="showOverlay" @click="toggleOverlay">
            <view class="overlay-content" @click.stop>
              <view class="toggle-button" @click="setViewMode('avatar')">
                <img
                  :src="
                    viewMode === 'avatar'
                      ? '../../static/images/select-twostate.png'
                      : '../../static/images/twostate-v.png'
                  "
                  alt=""
                />
                <text>头像</text>
              </view>
              <view class="toggle-button" @click="setViewMode('list')">
                <img
                  :src="
                    viewMode === 'list'
                      ? '../../static/images/select-state.png'
                      : '../../static/images/state-v.png'
                  "
                  alt=""
                />
                <text>列表</text>
              </view>
              <view class="toggle-button" @click="setViewMode('grid')">
                <img
                  :src="
                    viewMode === 'grid'
                      ? '../../static/images/select-twostate.png'
                      : '../../static/images/bigstate-v.png'
                  "
                  alt=""
                />
                <text>大图</text>
              </view>
            </view>
          </view>
        </view>
      </div>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TabBar from './components/tab.vue'
import BackTop from '@/components/seek/BackTop/backtop.vue'
import UserList from './components/user/userlist.vue'
import { onPageScroll } from '@dcloudio/uni-app'
const data = ref<{ age_range?: string }>({})
const showBackToTop = ref(false)
const showOverlay = ref(false)
const viewMode = ref('list') // 默认视图模式
// 滚动事件
onPageScroll((event) => {
  showBackToTop.value = event.scrollTop > 50
})
// 切换状态
const toggleOverlay = () => {
  showOverlay.value = !showOverlay.value
}

const setViewMode = (mode: string) => {
  viewMode.value = mode
  toggleOverlay() // 选择模式后关闭遮罩层
}

const tabs = ['推荐', '同城', '匹配我']
const activeTab = ref(0)
const activeTablist = ref('')
function handleTabChange(index: number) {
  activeTab.value = index
  activeTablist.value = tabs[index]
}

// const data = ref({})
const searchValue = (val: any) => {
  data.value = val
  handleTabChange(activeTab.value)
}
</script>

<style scoped lang="scss">
.page {
  position: relative;
}

.main-button {
  text-align: center;
  position: fixed;
  bottom: 200rpx;
  right: 40rpx;
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  background-color: #00aabf;
  color: #ffffff;
  font-size: 12px;
  padding: 5rpx 11rpx;
  image {
    width: 50rpx;
    height: 50rpx;
  }
}

.overlay {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-content {
  position: fixed;
  right: 40rpx;
  bottom: 320rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
}

.toggle-button {
  padding: 8rpx 20rpx;
  width: 96rpx;
  height: 96rpx;
  margin-bottom: 16rpx;
  background-color: #ffffff;
  border-radius: 8px;
  color: #666666;
  font-size: 12px;
  transition: background-color 0.3s;
  image {
    width: 50rpx;
    height: 50rpx;
  }

  &.active {
    background-color: #00bfa5;
    color: #ffffff;
  }
}

.toggle-button:last-child {
  margin-bottom: 0;
}
</style>
